/**
 * @author hanzhichen
 * @date 2021-01-27
 * 依然是不太通用的组件, 而且是版本2, 因为后端王晨他们又变更了接口格式, 所以组件也得改..
 * 一个非常简单的card, 上面是一个大的Title显示金额, 下面是一个小的Table显示金额明细
 * 最初在退费报表中使用...
 */
/* eslint-disable react/jsx-one-expression-per-line */
import React from 'react';
import {Row, Col} from 'antd';
import './common.styl';

const DetailCardTableV2 = props => {
    const {title = 0, dataSource = []} = props;
    return (
        <div className="detail-card-table-container">
            <Row>
                <div className="detail-card-table-container-title">
                    {title}
                </div>
            </Row>
            <Row className="detail-card-table-container-content">
                {Array.isArray(dataSource) &&
                    dataSource.map(({name, value}) => (
                        <Col span={24} key={name}>
                            <Row wrap>
                                <Col span={10} style={{marginBottom: 12}}>{name}：</Col>
                                <Col span={14}>
                                    {value}
                                </Col>
                            </Row>
                        </Col>
                    ))}
            </Row>
        </div>
    );
};

export default DetailCardTableV2;
